import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useRef } from 'react';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import PreviewForm from '@/components/PreviewForm';
import { TableListItem } from './data.d';
import { queryRule } from './service';

interface TableListProps extends FormComponentProps {}

const TableList: React.FC<TableListProps> = () => {
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<TableListItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '缩略图',
      dataIndex: 'oss_url',
      hideInSearch: true,
      render: (value, record) => (
        <img src={record.oss_url} width='130px' onClick={() => {
          handlePreviewModalVisible(true )
          setPreviewImg(record.oss_url)
        }} />
      )
    },
    {
      title: '链接',
      dataIndex: 'key',
      hideInSearch: true,
      render: (value, record) => (
        <a href={record.oss_url} target='_blank'>查看</a>
      )
    },
    {
      title: '时间',
      dataIndex: 'created_at',
      hideInSearch: true,
      sorter: true,
      valueType: 'dateTime',
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle=""
        actionRef={actionRef}
        rowKey="key"
        toolBarRender={(action, { selectedRows }) => [
        ]}
        tableAlertRender={(selectedRowKeys, selectedRows) => (
          <div>
            已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
          </div>
        )}
        request={params => queryRule(params)}
        columns={columns}
        rowSelection={{}}
      />
      {
        previewModelVisible && (
          <PreviewForm
            previewModelVisible={previewModelVisible}
            onVisibleModel={handlePreviewModalVisible}
            previewImg={previewImg}
          />
        )
      }
    </PageHeaderWrapper>
  );
};

export default Form.create<TableListProps>()(TableList);
